<template>
  <div class="bg-light">
    <div class="container-title">商品属性</div>
    <Form :label-width="110">
      <Row>
        <i-col v-show="productType !== 'NORMAL'" span="12" class="require-nature pr">
          <FormItem label="胎面宽：">
            <span v-if="isProduct">{{ productInfoTireExtDTO.tireWidth ? productInfoTireExtDTO.tireWidth : '无' }}</span>
            <Select
              v-else
              v-model="productInfoTireExtDTO.tireWidth"
              filterable
              clearable
              :disabled="isProduct ? true : isLook"
              @on-change="changeGg($event, 'width')"
            >
              <Option v-for="(item, index) in tireWidthArr" :key="index" :value="item.value">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col v-show="productType !== 'NORMAL'" span="12" class="pr">
          <FormItem label="扁平率：">
            <span v-if="isProduct">{{ productInfoTireExtDTO.tireAspectRatio ? productInfoTireExtDTO.tireAspectRatio : '无' }}</span>
            <Select
              v-else
              v-model="productInfoTireExtDTO.tireAspectRatio"
              filterable
              clearable
              :disabled="isProduct ? true : isLook"
              @on-change="changeGg($event, 'ratio')"
            >
              <Option v-for="(item, index) in tireRatioArr" :key="index" :value="item.value">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col v-show="productType !== 'NORMAL'" span="12" class="require-nature pr">
          <FormItem label="直径：">
            <span v-if="isProduct">{{ productInfoTireExtDTO.tireRim ? productInfoTireExtDTO.tireRim : '无' }}</span>
            <Select
              v-else
              v-model="productInfoTireExtDTO.tireRim"
              filterable
              clearable
              :disabled="isProduct ? true : isLook"
              @on-change="changeGg($event, 'rim')"
            >
              <Option v-for="(item, index) in tireSizeArr" :key="index" :value="item.value">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col v-for="(item, index) in productAttributeDTOs" :key="index" span="12" :class="[item.isMust ? 'require-nature pr' : 'pr']">
          <FormItem v-if="item.editType ==='TEXT'" :label="item.name + '：'">
            <template v-if="isProduct">
              <span v-if="item.name === '规格'">{{ item.value ? item.value : '无' }}</span>
              <Input
                v-else
                v-model="item.value"
                :maxlength="20"
                placeholder="请输入"
                @on-change="textChange(item, index)"
              /></Input>
            </template>
            <Input
              v-else
              v-model="item.value"
              :maxlength="20"
              :disabled="isProduct && item.name === '规格' ? true : isLook"
              placeholder="请输入属性值"
              @on-change="textChange(item, index)"
            /></Input>
          </FormItem>
          <FormItem v-else :label="item.name + '：'">
            <span v-if="isProduct">{{ item.attributeValueId ? item.attributeValueId : '无' }}</span>
            <Select v-else v-model="item.attributeValueId" filterable clearable :disabled="isProduct&&item.name=='花纹' ? true : isLook" @on-change="onChangeNature(item, $event, index)">
              <Option v-for="(child, ind) in item.attributeValueDTOList" :key="ind" :value="child.attributeValueId">{{ child.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
export default {
  props: {
    productType: {
      type: String,
      default: ''
    },
    tireRatioArr: {
      type: Array,
      default: () => []
    },
    tireSizeArr: {
      type: Array,
      default: () => []
    },
    tireWidthArr: {
      type: Array,
      default: () => []
    },
    isLook: {
      type: Boolean,
      default: false
    },
    isProduct: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      productAttributeDTOs: [],
      productAttributeObj: {},
      productAttributeArr: [],
      textAttributeObj: {},
      textAttributeArr: [],
      allAttributeArr: [],
      productInfoTireExtDTO: {}, // 轮胎的属性
      brandId: null // 商品基本信息中的品牌id
    }
  },
  methods: {
    onChangeNature (item, e, index) {
      if (item.type === 'tire') { // 轮胎的属性
        switch (item.name) {
          // case '扁平率':
          //   this.productInfoTireExtDTO.tireAspectRatio = e
          //   break
          case '花纹':
            this.productInfoTireExtDTO.tireFigure = e || null
            if (this.brandId) {
              if (e) { // 商品新增、编辑时，把花纹模板里的图片信息和图文信息(注意：花纹详情不需要带过去)带到那个商品信息里，然后可以再次编辑
                this.getTireFigureData(e)
              }
            } else {
              if (e) {
                this.$Notice.warning({
                  title: '请先选择品牌'
                })
                this.productInfoTireExtDTO.tireFigure = null
                this.productAttributeDTOs[index].attributeValueId = null
              }
            }
            break
          case '层级':
            this.productInfoTireExtDTO.tireLayer = e || null
            break
          case '负荷指数':
            this.productInfoTireExtDTO.tireLoad = e || null
            break
          case '类型标识':
            this.productInfoTireExtDTO.tireTypeSymbol = e || null
            break
          // case '直径':
          //   this.productInfoTireExtDTO.tireRim = e
          //   break
          // case '胎面宽':
          //   this.productInfoTireExtDTO.tireWidth = e
          //   break
          case '速度级别':
            this.productInfoTireExtDTO.tireSpeed = e || null
            break
        }
      } else {
        if (!this.productAttributeObj[index]) this.productAttributeObj[index] = {}
        this.productAttributeObj[index].attributeId = item.attributeId
        this.productAttributeObj[index].name = item.name
        this.productAttributeObj[index].attributeValueId = e || null
        this.productAttributeObj[index].value = null // 编辑商品的时候，value已经存在了，然后在点击×删掉的话，导致value值页面上是不存在了，但是数据里value还是一开始编辑时带进来的name
        item.attributeValueDTOList.forEach(m => {
          if (m.attributeValueId === e) this.productAttributeObj[index].value = m.value
        })
        this.productAttributeArr = Object.values(this.productAttributeObj)
        this.allAttributeArr = this.productAttributeArr.concat(this.textAttributeArr)
      }
    },
    changeGg (e, type) {
      if (this.productType === 'PASS_TIRE') { // 如果是‘PASS_TIRE’，那规格要根据扁平率，直径，胎面宽来变化
        switch (type) {
          case 'ratio': // 扁平率
            if (this.productInfoTireExtDTO.tireRim && this.productInfoTireExtDTO.tireWidth) {
              if (e) {
                this.productInfoTireExtDTO.tireSpec = this.productInfoTireExtDTO.tireWidth + '/' + e + 'R' + this.productInfoTireExtDTO.tireRim
              } else {
                this.productInfoTireExtDTO.tireSpec = this.productInfoTireExtDTO.tireWidth + 'R' + this.productInfoTireExtDTO.tireRim
              }
            }
            this.productInfoTireExtDTO.tireAspectRatio = e || null
            break
          case 'rim': // 直径
            if (this.productInfoTireExtDTO.tireWidth) {
              if (e) {
                let tireAspectRatio = this.productInfoTireExtDTO.tireAspectRatio ? this.productInfoTireExtDTO.tireAspectRatio + 'R' : ''
                this.productInfoTireExtDTO.tireSpec = this.productInfoTireExtDTO.tireWidth + '/' + tireAspectRatio + e
              }
            }
            this.productInfoTireExtDTO.tireRim = e || null
            break
          case 'width': // 胎面宽
            if (this.productInfoTireExtDTO.tireRim) {
              if (e) {
                let tireAspectRatio = this.productInfoTireExtDTO.tireAspectRatio ? this.productInfoTireExtDTO.tireAspectRatio + 'R' : ''
                this.productInfoTireExtDTO.tireSpec = e + '/' + tireAspectRatio + this.productInfoTireExtDTO.tireRim
              }
            }
            this.productInfoTireExtDTO.tireWidth = e || null
            break
        }
        this.productAttributeDTOs.forEach(item => {
          if (item.name === '规格') {
            this.$set(item, 'value', this.productInfoTireExtDTO.tireSpec)
          }
        })
      } else {
        if (type === 'ratio') this.productInfoTireExtDTO.tireAspectRatio = e || null
      }
    },
    textChange (item, index) {
      if (item.type === 'tire') {
        switch (item.name) {
          case '规格':
            this.productInfoTireExtDTO.tireSpec = item.value || null
            break
          // case '类型标识':
          //   this.productInfoTireExtDTO.tireTypeSymbol = item.value || null
          //   break
        }
      } else {
        if (!this.textAttributeObj[index]) this.textAttributeObj[index] = {}
        this.textAttributeObj[index].attributeId = item.attributeId
        this.textAttributeObj[index].name = item.name || null
        this.textAttributeObj[index].value = item.value || null
        this.textAttributeArr = Object.values(this.textAttributeObj)
        this.allAttributeArr = this.productAttributeArr.concat(this.textAttributeArr)
      }
    },
    editData (newAttrs) { //编辑时带进来的商品属性
      this.productAttributeArr = []
      this.productAttributeObj = {}
      this.productInfoTireExtDTO = {}
      this.textAttributeObj = {}
      this.textAttributeArr = []
      this.productAttributeDTOs.forEach((item, index) => {
        newAttrs.forEach(m => {
          if (m.attributeId === item.attributeId) {
            if (item.editType === 'TEXT') {
              this.$set(item, 'value', m.value)
              if (!this.textAttributeObj[index]) this.textAttributeObj[index] = {}
              this.textAttributeObj[index].id = m.id
              this.textAttributeObj[index].attributeId = m.attributeId
              this.textAttributeObj[index].name = m.name
              this.textAttributeObj[index].value = m.value
              this.textAttributeArr = Object.values(this.textAttributeObj)
            } else {
              this.$set(item, 'attributeValueId', m.attributeValueId)
              if (!this.productAttributeObj[index]) this.productAttributeObj[index] = {}
              this.productAttributeObj[index].id = m.id
              this.productAttributeObj[index].attributeId = m.attributeId
              this.productAttributeObj[index].name = item.name
              item.attributeValueDTOList.forEach(k => {
                if (k.attributeValueId === m.attributeValueId) {
                  this.productAttributeObj[index].value = k.value // 取分类接口里带出来的value值
                  this.productAttributeObj[index].attributeValueId = m.attributeValueId
                }
              })
              this.productAttributeArr = Object.values(this.productAttributeObj)
            }
          }
        })
      })
      this.allAttributeArr = this.productAttributeArr.concat(this.textAttributeArr)
    },
    getTireFigureData (figure) { // 获取花纹模板里带着的图片信息和图文信息
      let param = {
        brandId: this.brandId
      }
      this.$ajaxGet(`/figure/template/findByFigure/${figure}`, param).then(data => {
        if (data) {
          this.$emit('changeFigureData', data)
        }
      })
    }
  }
}
</script>
